<template>
	<view class="">
		<comment router="/pages/home/child/week-report-view/reply" :id="id" :pageReady="pageReady" :data="params">
			<view class="info">
				<view class="">{{data.pid}}</view>
				<view class="info__right">{{data.wancheng}}</view>
			</view>
			<view class="content">{{data.name}}</view>
			<view class="" style="padding: 20rpx;">
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<view class="" style="display: flex;justify-content: space-between;flex: 1;">
						<view class="week-text" v-for="(v,i) in weeks" :style="{'background-color': formatWeek(i,data) ? '#36cfc9':'','color': formatWeek(i,data) ? '#000' : '#aaa'}">{{v}}</view>
					</view>
					<view class="" style="width: 200rpx;position: relative;margin-left: 100rpx;">
						<view class="" style="margin-left: 10rpx;font-size: 25rpx;color: #0050b3;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 1;">{{data.num}}%</view>
						<u-line-progress :percentage="data.num" :showText="false" activeColor="skyblue"></u-line-progress>
					</view>
				</view>
			</view>
		</comment>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Comment from '@/pages/home/child/week-report-view/components/comment.vue'
	
	export default {
		components: {
			Comment
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				businessId: '',//业务id
				id: '',//回复id（从消息列表跳转需要）
				pageReady: false,
				data: {},
				params: {},
				weeks: ['一','二','三','四','五','六','日','加'],
			}
		},
		onLoad(options) {
			this.businessId = options.businessId;
			this.id = options.id;
			this.getWeekReportDetail();
		},
		onReady() {
			this.pageReady = true;
		},
		methods: {
			/**
			 * 获取周报详情
			 */
			getWeekReportDetail() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWeekReportDetail',
					apiparam: {
						id: this.businessId,
						obsusername: this.obsusername,
						obspxid: this.pxid
					},
					success(res) {
						if(res.length) {
							that.params = {
								topicId: res[0].TopicId,
								businessId: res[0].id,
								owner: res[0].rbuser,
								ownerPxid: res[0].pxid,
							};
							res.forEach(item => {
								item.name = item.name.replace(/%22/g,'"')
								item.num = (parseFloat(item.gongzuoliang)*100).toFixed(0)
							})
							that.data = res[0];
							uni.setNavigationBarTitle({
								title: res[0].flag + '周-' + res[0].rbuser
							})
						}
					}
				})
			},
			/**
			 * 判断每周的日期
			 * @param {Object} index
			 * @param {Object} item
			 */
			formatWeek(index,item) {
				for(let i = 0;i < 8;i++) {
					if(item['a' + (i+1)] && index == i) {
						return true
					}
				}
				return false
			},
		}
	}
</script>

<style scoped lang="scss">
	.info {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		
		view {
			color: #aaa;
		}
		
		&__right {
			width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: right;
		}
	}
	
	.content {
		padding: 20rpx;
	}
	
	.week-text {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 40rpx;
	}
</style>
